iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 27
0
Modern Web

For 前端小幼苗的圖解筆記系列 第 27

[Vue.js] 基本語法

  • 分享至 

  • xImage
  •  

(以下文章適用於Vue.js 2.X版本)


起手式

  1. 引入 Vue.js
  2. new 一個 Vue 物件
    var vm = new Vue({
    
    })
    
    • vm: view model
  3. 掛載 Vue 節點(將 Vue 掛載到指定的 DOM 元素,以 id 指定)
    var vm = new Vue({
        el: "#app"
        ...
    })
    - el: 掛載指定的物件(element),使其&其所有子物件都可以應用 Vue
    

最基本的 Vue 物件就建立起來了。


{{ }}

  • 可直接塞入data內容或直接寫JS輸出結果

Directives (指令)

v-model

#app
    input(v-model="username" placeholder="your name")
    p(v-if="username") hi! {{username}}
var vm = new Vue({
    el: "#app",
    data: {
        username: ''
    }
})

v-on (簡寫 @) 事件


<div id="app">
    <p>click {{ num }} 下</p>
    <input type="submit" value="click" v-on:click="clickNum">
</div>
var vm = new Vue({
    el: "#wrap",
    ... ,
    methods: {
        clickNum(){
        ...
        }
    }
})


v-for

<div id="app">
    <p>hi!我是 {{name}}</p>
    <ul v-for="friend in friends">
      <li>{{friend}}</li>
    </ul>
</div>
var vm = new Vue({
    el: "#app",
    data:{
        name: "Eudora",
        friends:['Amy','Betty','Claire']
    }
})


來些小栗子:

輸入文字即時顯示

>>Codepen Demo

<div id="app">
  <input v-model="username" placeholder="your name"/>
  <p v-if="username">hi! {{username}}</p>
</div>
var vm = new Vue({
    el: "#app",
    data: {
        username: ''
    }
})

Class 切換

>>Codepen Demo

<div id="app">
  <ul>
    <li :class="{'active':tab=='menu1'}" @click="tab='menu1'">menu1</li>
    <li :class="{'active':tab=='menu2'}" @click="tab='menu2'">menu2</li>
    <li :class="{'active':tab=='menu3'}" @click="tab='menu3'">menu3</li>
  </ul>
</div>
var vm = new Vue({
	el: "#app",
	data: {
        tab: 'menu1'
    }
})
.active{
    ...
}

個人 Blog: https://eudora.cc/


上一篇
Ajax - 將取得的 API 資料應用於頁面中 ( 以 JSON 為例 )
下一篇
[Vue.js + Axios] ToDoList (上)
系列文
For 前端小幼苗的圖解筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言